<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 123456
  Date: 2023/5/25
  Time: 10:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            width: 100%;
        }

        body {
            height: 100%;
            cursor: default;
            display: flex;
            flex-direction: column;
        }

        header {
            position: relative;
            display: block;
            width: 100%;
            height: 100px;
            background-color: black;
            /* position: fixed; */
            /* z-index: 100; */
        }

        .title {
            /* padding: auto; */
            position: absolute;
            color: white;
            font-size: 50px;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            line-height: 90px;
            left: 33px;
        }

        .tables {
            position: absolute;
            width: 60%;
            height: 100%;
            right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .table {
            width: 20%;
            height: 100%;
            color: white;
            background-color: black;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: default;
        }

        .table:hover {
            background-color: rgb(107, 105, 105);
        }

        .user {
            /* position: absolute; */
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 100px;
            /* background-color: red; */
            right: 0;
            color: white;
        }

        .user img {
            width: 80px;
            height: auto;
            border-radius: 50%;
        }

        .middle {
            /* position: absolute; */
            width: 100%;
            height: 300px;
            top: 100px;
            background-color:antiquewhite;
            display: flex;
            justify-content: space-around;
            flex-direction: row;

        }

        .bookImgBox {
            height: 300px;
            width: 300px;
            display: inline-block;
            padding: 10px;
            box-sizing: border-box;
            line-height: 300px;
            background-color: rgba(128, 128, 128, 0.31);
        }

        .bookImgBox img {
            width: 250px;
            height: 250px;
            position: relative;
            top: 25px;
            left: 10%;

        }

        .detail {
            display: inline-block;
            width: 40%;
            height: 100%;
            right: 5%;
        }

        .detailed {
            width: 100%;
            height: 100%;
            display: flex;
            line-height: 30px;
            justify-content: center;
            /* align-items: center; */
            flex-direction: column;
        }

        .info {
            height: 50px;
            font-size: larger;
            color: brown;
        }

        button {
            height: 40px;
            width: 100px;
            background-image: linear-gradient(to right, #f2e7a9, rgb(173, 173, 173));
        }

        .Comments{
            width: 100%;
            height: 1000px;
            background-color: bisque;
            overflow: auto;

            display: flex;
            align-items: center;
            flex-direction: column;

        }

        .aComment {
            width: 90%;
            height: 300px;
            background-color: burlywood;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 25px;
            margin: 10px;
        }

        .CommentImg {
            width: 200px;
            height: 250px;
            background-color: rgba(128, 128, 128, 0.313);
            border-radius: 30px;
        }

        .CommentIntroduce {
            width: 70%;
            height: 250px;
            background-color: white;
            font-size: large;
            font-family: 'Times New Roman', Times, serif;
            padding: 10px;
            box-sizing: border-box;
        }

        .CommentName {
            width: 100%;
            height: 10%;
            padding: 10px;
            box-sizing: border-box;
            font-style: italic;
        }

        .CommentText{
            width: 100%;
            height: 55%;
            padding: 10px;
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .appendix {
            width: 100%;
            height: 15%;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-end;
        }

        .bottom {
            background-color: #4A6782;
            height: 300px;
            width: 100%;
            font-size: xx-large;
            font-family:'Times New Roman', Times, serif;
            font-style: italic;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
<header>
    <div class="title">
        BookCLUB
    </div>
    <div class="tables">
        <div class="table" onclick="toHome()">
            <div>首页</div>
        </div>
        <div class="table" onclick="toBook()">
            <div>阅读</div>
        </div>
        <div class="table" onclick="toBook()">
            <div>讨论</div>
        </div>
        <div class="user" onclick="toUser()">
            <img src="img/nullhead.png">
            <div style="margin: 10px;">
                <div style="margin: 10px;" id="getName">
                    <%=session.getAttribute("user")%>
                </div>
            </div>
        </div>
    </div>
</header>
<div class="middle">
    <div class="bookImgBox">
        不好意思，暂无图片
        <div style="display: none" id="getbid"><%=request.getAttribute("bid")%></div>
        <%--在js中获取servlet传来的数据很困难，还要ajax异步，为方便用EL获取后再用innerText获取这些简单的数据，如此诡异的方法 --%>
    </div>
    <div class="detail">
        <div class="detailed">
            <div class="info">
                书名：<%=request.getAttribute("bookName")%>
            </div>
            <div class="info">
                书本类型：<%=request.getAttribute("bookType")%>
            </div>
            <div class="info">
                作者名：<%=request.getAttribute("author")%>
            </div>
            <div class="info">
                热度：<%=request.getAttribute("recommend")%>
            </div>
            <button onclick="publish(0)">
                发表评论
            </button>
        </div>
    </div>
</div>
<div class="Comments" id="Comments">
<%--    <c:forEach var="COMMENT" items='<%=request.getAttribute("requsetScope.comments")%>'>--%>
        <c:forEach items="${comments}" var="COMMENT">
        <%--一组数据内三个不同信息，不能用map，list套list也不行，故用了一个笨方法，传一个自定义类过来 --%>
        <div class="aComment">
            <div class="CommentImg">
            </div>
            <div class="CommentIntroduce">
                <div class="CommentName">
                        ${COMMENT.getUsername()}
                        <c:if test="${COMMENT.getWhich()!=0}">
                            回复第${COMMENT.getWhich()}楼
                        </c:if>
                </div>
                <div class="CommentText">
                        ${COMMENT.getContent()}
                </div>
                <div class="appendix">
                    <div style="width: 100px;" class="reply">回复</div>
                    <div class="deleteButton" style="width:100px">
                        删除
<%--                        点赞:${COMMENT.getLikes()}--%>
<%--                        不要点赞了--%>
                    </div>
                </div>
            </div>
<%--            <form style="display: none" id="forms" action="/addComment" method="post">--%>
<%--                <input name="uid" value='<%=session.getAttribute("uid")%>'>--%>
<%--                <input name="bid" value='<%=session.getAttribute("bid")%>'>--%>
<%--            </form>--%>
        </div>
    </c:forEach>

    <form id="deleteWhich" style="display:none;" action="/deleteComment" method="post">
        <input name="deleteWhich">
        <input name="bid" id="givebid2">
    </form>
</div>
<div class="bottom">
    读书时,我愿在每一个美好思想的面前停留,就像在每一条真理面前停留一样
</div>
<form style="display: none" method="post" action="/BookList" id="BookList"></form>
</body>

</html>
<script>
    var ifcreate=false;
    window.onload=function(){
        var t=document.getElementById('getName').innerText;
        if(t.length>10){
            t=t.substring(0,9)+"...";
            document.getElementById('getName').innerText=t;
        }
    }
    publish = function (which) {
        if (ifcreate == true) {
            alert('请先取消原来的发布');
        }
        else {
            var co = document.getElementById('Comments');
            var newCo = document.createElement('div');
            newCo.className = "aComment";
            newCo.id = "newCo";
            var font='<div class="CommentImg"></div><div class="CommentIntroduce"><div class="CommentName" id="hideName"></div><textarea cols="8" class="CommentText" style="width:90%"></textarea><div class="appendix"><button style="width: 100px;margin-right:10px" onclick="refusePush()">取消发布</button><button style="width:100px" onclick="toPublic(';
            var late=')">发布</button></div></div><form style="display:none;" id="hideform"  action="/addComment" method="post"><input id="hideInput" name="content"><input id="givebid" name="bid"><input id="hidewhich" name="which"></form>';
            // newCo.innerHTML = '<div class="CommentImg"></div><div class="CommentIntroduce"><div class="CommentName" id="hidename"></div><textarea cols="8" class="CommentText" style="width:90%"></textarea><div class="appendix"><button style="width: 100px;margin-right:10px" onclick="refusePush()">取消发布</button><button style="width:100px" onclick="toPublic()">发布</button></div></div><form style="display:none;" id="hideform"  action="/addComment" method="post"><input id="hideInput" name="content"><input id="givebid" name="bid"></form>'
            newCo.innerHTML=font+which+late;
            co.appendChild(newCo);

            if (which==0){
                var a=document.getElementById('hideName');
                a.innerText=document.getElementById('getName').innerText;
            }
            else {
                document.getElementById('hideName').innerText=document.getElementById('getName').innerText+"  回复第"+which+"楼";
            }

            ifcreate = true;
        }

    }
    toPublic=function (which){
        var givebid=document.getElementById('givebid');
        // console.log("document.getElementById('getbid').innerText;"+document.getElementById('getbid').innerText)
        givebid.value=document.getElementById('getbid').innerText;
        var hide=document.getElementById('hideInput');
        hide.value=document.getElementsByTagName('textarea')[0].value.split("\n").join("");//防止textarea存在换行导致可能存在的报错
        var hidewhich=document.getElementById('hidewhich');
        hidewhich.value=which;
        var forms=document.getElementById('hideform');
        forms.submit();
    }
    allclick = function () {
        alert("暂未实现")
    }
    toHome=function (){
        window.location.href='Homepage.jsp';
    }
    toUser=function (){
        window.location.href='UserDetail.jsp';
    }
    toBook=function (){
        var b=document.getElementById('BookList');
        b.submit();
    }
    refusePush = function () {
        var n = document.getElementById('newCo');
        n.remove();
        ifcreate = false;
    }

    var container = document.getElementsByClassName('Comments');
    container[0].onclick = function (e) {
        let event = e || window.event;
        var tar = event.target;
        var tarClassName = tar.classList[0];

        var tar2=tar.parentNode.parentNode.parentNode;

        const parent = tar2.parentNode;
        if (!parent) {
            return -1; // 没有父节点，返回-1表示未找到
        }
        const siblings = parent.childNodes;
        let index = -1;
        for (let i = 0; i < siblings.length; i++) {
            // console.log("index"+i+":"+siblings[i]);
            //每个aComment元素的下标都是什么1，3，5，7，不知道为什么两个Object：element之间会隔了一个Object：text
            if (siblings[i] === tar2) {
                index = i;
                break;
            }
        }
        index=(index-1)/2+1;//没有第0楼，从第1楼开始

        if (tarClassName == 'deleteButton') {
            deleteComment(index,tar2);
        }
        else if(tarClassName=='reply'){
            // findReplyBrother(tar.parentNode.parentNode.parentNode);
            publish(index);
        }
    }

    deleteComment=function (index,tar){
        var deleteWhich=document.getElementById('deleteWhich');
        var givebid2=document.getElementById('givebid2');
        givebid2.value=document.getElementById('getbid').innerText;
        // console.log(deleteWhich.childNodes[1])//这里也是不知道为什么隔了个text，原本是第一个子节点，变成了第二个子节点了
        // deleteWhich.childNodes[1].value=(index-1)/2;
        deleteWhich.childNodes[1].value=index-1;

        var choosename=tar.childNodes[3].childNodes[1].innerText;
        choosename=choosename.split(" ")[0];
        var getname=document.getElementById("getName").innerText;
        if(choosename!=getname){
            alert("你不能删掉别人的评论");
        }
        else{
            deleteWhich.submit();
        }
    }
</script>